<template>
  <div
    class="artist"
    @scroll.stop="scrollTop()"
    ref="artist"
    v-if="artists_data.code == 200 && artist_detail_data.code == 200"
  >
    <header>
      <div class="left" @click="back()">
        <i></i>
        <span v-show="isTop">{{artists_data.artist.name}}</span>
      </div>
      <div class="right">
        <button v-show="isTop" class="followBtn">
          <i></i>关注
        </button>
        <i></i>
      </div>
    </header>
    <main>
      <div
        class="top"
        :style="'background:url('+artists_data.artist.picUrl+') no-repeat;background-size:100% auto;'"
        :class="isTop?'sticky':''"
      >
        <div class="name">{{artists_data.artist.name}}</div>
        <div class="nickname">昵称：{{artist_detail_data.profile.nickname}}</div>
        <div class="follow">
          <span class="follows">关注：{{artist_detail_data.profile.follows}}</span>
          <span>&nbsp;|&nbsp;</span>
          <span class="followeds">粉丝：{{artist_detail_data.profile.followeds}}</span>
        </div>
        <div class="mainAuthType">
          <span class="desc">{{artist_detail_data.profile.mainAuthType.desc}}</span>
          <span
            class="tags"
            v-for="(item,index) in artist_detail_data.profile.mainAuthType.tags"
            :key="index"
          >{{item}}</span>
        </div>
        <div class="btn">
          <button class="followBtn">
            <i></i>关注
          </button>
          <button class="sendText">
            <i></i>发私信
          </button>
        </div>
      </div>
      <div class="content" :class="isTop?'mt':''">
        <div class="columnTop">
          <i :style="{left:barLeft,width: barWidth+'rem'}"></i>
          <ul>
            <li class="click_hover" @click.stop="columnTopClick(1)" :class="tabIndex == 1?'red':''">
              <span>主页</span>
            </li>
            <li class="click_hover" @click.stop="columnTopClick(2)" :class="tabIndex == 2?'red':''">
              <span>{{typeOption[typeOptionIndex]}}</span>
              <!-- <i :class="[isAct?'act':'',isRot>1?'rot':'']"></i>
              <div class="select" v-show="isRot>1">
                <ul>
                  <li
                    class="click_hover"
                    v-for="(oItem,oIndex) in typeOption"
                    :key="oIndex"
                    @click.stop="typeOptionClick(oIndex)"
                  >
                    {{oItem}}
                    <b class="true" v-show="typeOptionIndex == oIndex"></b>
                  </li>
                </ul>
              </div>-->
            </li>
            <li class="click_hover" @click.stop="columnTopClick(3)" :class="tabIndex == 3?'red':''">
              <span>专辑</span>
            </li>
            <li class="click_hover" @click.stop="columnTopClick(4)" :class="tabIndex == 4?'red':''">
              <span>视频</span>
            </li>
            <li class="click_hover" @click.stop="columnTopClick(5)" :class="tabIndex == 5?'red':''">
              <span>动态</span>
            </li>
          </ul>
        </div>
        <swiper
          :options="swiperOption"
          class="swiper-wrap"
          ref="mySwiper"
          :class="isRot>1?'mask swiper-no-swiping':''"
        >
          <swiper-slide>
            <div class="hot">
              <div class="header click_hover" @click.stop="playAll()">
                <i></i>
                <span>播放热门{{artists_data.hotSongs.length}}</span>
              </div>
              <ul>
                <li
                  class="click_hover"
                  v-for="(item,index) in doneHotData"
                  :key="index"
                  :class="item.available?'':'unavailable'"
                >
                  <div class="left" @click.stop="song(item.id)">
                    <div class="sort">{{index+1}}</div>
                    <div class="info">
                      <p class="title">{{item.name}}</p>
                      <p class="ar">
                        <span v-for="(item1,index1) in item.ar" :key="index1">
                          {{item1.name}}
                          <span v-if="index1<item.ar.length-1">/</span>
                        </span>
                        <span>-</span>
                        <span class="al">{{item.al.name}}</span>
                      </p>
                    </div>
                  </div>
                  <div class="right">
                    <i class="video" v-show="item.mv"></i>
                    <i class="more" @click.self="more(item.id,item.name)"></i>
                  </div>
                </li>
              </ul>
              <div
                class="moreHot click_hover"
                v-show="artists_data.hotSongs.length > 5"
                @click.stop="moreHotClick()"
              >
                <span>更多热歌</span>
                <i></i>
              </div>
              <div class="line"></div>
              <div class="basicInfo">
                <div class="basicTop">
                  <span>基本信息</span>
                </div>
                <div class="click_hover">
                  <p class="nickname">昵称：{{artist_detail_data.profile.nickname}}</p>
                  <p class="gender">性别：{{artist_detail_data.profile.gender | doneGender}}</p>
                  <p class="briefDesc el4">简介：{{artists_data.artist.briefDesc}}</p>
                  <div class="moreInfo click_hover">
                    <span>更多信息</span>
                    <i></i>
                  </div>
                </div>
              </div>
              <div class="line"></div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="song">
              <div class="header">
                <i></i>
                <span>播放热门{{artists_data.hotSongs.length}}</span>
              </div>
              <ul>
                <li
                  class="click_hover"
                  v-for="(item,index) in artists_data.hotSongs"
                  :key="index"
                  :class="item.available?'':'unavailable'"
                >
                  <div class="left" @click.stop="song(item.id)">
                    <div class="sort">{{index+1}}</div>
                    <div class="info">
                      <p class="title">{{item.name}}</p>
                      <p class="ar">
                        <span v-for="(item1,index1) in item.ar" :key="index1">
                          {{item1.name}}
                          <span v-if="index1<item.ar.length-1">/</span>
                        </span>
                        <span>-</span>
                        <span class="al">{{item.al.name}}</span>
                      </p>
                    </div>
                  </div>
                  <div class="right">
                    <i class="video" v-show="item.mv"></i>
                    <i class="more" @click.self="more(item.id,item.name)"></i>
                  </div>
                </li>
              </ul>
            </div>
          </swiper-slide>
          <swiper-slide>33333</swiper-slide>
          <swiper-slide>44444</swiper-slide>
          <swiper-slide>55555</swiper-slide>
        </swiper>
      </div>
    </main>
    <!-- 点击更多按钮出现底部详情栏 -->
    <VSongDetailMore
      v-if="isSongDetailMore"
      :songId="songId"
      @songDatailClose="songDatailClose"
      @showUserPlaylist="showUserPlaylist"
      @artistsId="artistsId"
    ></VSongDetailMore>
    <!-- 用户歌单 -->
    <vUserPlaylist
      v-if="isUserPlaylist"
      :songId="songId"
      @colseUserPlaylist="colseUserPlaylist"
      @showNewPlaylist="showNewPlaylist"
      @userTracksFail="tracksFail"
      @userTracksSuccess="tracksSuccess"
    ></vUserPlaylist>
    <!-- 新建歌单 -->
    <vNewPlaylist
      v-if="isNewPlaylist"
      @colseNewPlaylist="colseNewPlaylist"
      :name="songName"
      :songId="songId"
      @colseUserPlaylist="colseUserPlaylist"
      @tracksSuccess="tracksSuccess"
    ></vNewPlaylist>
    <!-- 底部灰色提示 -->
    <vBottomGrayPrompt :prompt_msg="bottomGrayPromptMsg" v-show="isBottomGrayPrompt"></vBottomGrayPrompt>
    <!-- 多个歌手名弹窗 -->
    <vArtistNamePopup
      v-show="isArtistNamePopup"
      :artistsIdList="artistsIdList"
      @colseArtistNamePopup="colseArtistNamePopup"
    ></vArtistNamePopup>

    <v-foot-nav></v-foot-nav>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import vFootNav from "@/components/foot_nav";
import VSongDetailMore from "@/components/song_detail_more";
import vUserPlaylist from "@/components/user_playlist";
import vNewPlaylist from "@/components/new_playlist";
import vBottomGrayPrompt from "@/components/bottom_gray_prompt";
import vArtistNamePopup from "@/components/artist_name_popup";
export default {
  components: {
    swiper,
    swiperSlide,
    vFootNav,
    VSongDetailMore,
    vUserPlaylist,
    vNewPlaylist,
    vBottomGrayPrompt,
    vArtistNamePopup
  },
  data() {
    const that = this;
    return {
      tabIndex: 1, //是第1个栏目
      tabWidth: 1.5, // 每个tab的宽度
      barWidth: 0.65, // tab底部红色线的宽度
      mySwiper: null, // swiper对象
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        //循环
        loop: false,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        // autoplay: {
        //   delay: 1500,
        //   stopOnLastSlide: false,
        //   /* 触摸滑动后是否继续轮播 */
        //   disableOnInteraction: false
        // },
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        on: {
          //滑动之后回调函数
          slideChangeTransitionStart: function() {
            /* realIndex为滚动到当前的slide索引值 */
            that.tabIndex = this.realIndex + 1;
            // if (that.tabIndex == 2) {
            //   if (that.isRot < 2) {
            //     that.isRot++;
            //   } else {
            //     that.isRot--;
            //   }
            //   that.isAct = true;
            // } else {
            //   that.isRot = 0;
            //   that.isAct = false;
            // }
            that.swiper.slideTo(that.tabIndex - 1, 800, false);
            if (that.isTop) {
              that.$refs.artist.scrollTop = 181;
            }
          }
        }
      },
      isTop: false, // 是否滚动到指定位置
      isAct: false, // 歌曲栏目下标是否变红
      isRot: 0, // 歌曲栏目下标是否翻转
      isSelectBox: false, // 歌曲栏目选择栏是否显示
      typeOption: ["歌曲", "作词", "作曲"], // 歌曲栏目选择栏是否显示
      typeOptionIndex: 0, // 歌曲栏目选择栏下标值
      music: document.getElementById("audio"),
      isSongDetailMore: false, // 控制更多详情栏显隐
      isUserPlaylist: false, // 控制用户歌单显隐
      isNewPlaylist: false, // 控制新建歌单弹窗显隐
      bottomGrayPromptMsg: "", // 底部提示信息
      isBottomGrayPrompt: false, //是否显示底部提示
      isArtistNamePopup: false, // 是否显示多个歌手名选择弹窗
      artistsIdList: [], // 歌手id
      songId: null, // 歌曲id
      songName: "" // 歌曲名
    };
  },
  computed: {
    // swiper对象
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    // 红线的位置
    barLeft() {
      return (
        this.tabWidth * (this.tabIndex - 1) +
        (this.tabWidth - this.barWidth) / 2 +
        "rem"
      );
    },
    ...mapState("song_detail", ["song_detail_data"]),
    ...mapState("artists", [
      "artists_data",
      "available_data",
      "available_flag"
    ]),
    ...mapState("artist_desc", ["artist_detail_data"]),
    ...mapGetters("artists", ["doneHotData"])
  },
  created() {
    this.getArtists();
  },
  methods: {
    // 关闭多个歌手名弹窗
    colseArtistNamePopup() {
      this.isArtistNamePopup = false;
      this.artistsIdList = [];
    },
    // 获取多个歌手id
    artistsId({ idList }) {
      for (let i = 0; i < idList.length; i++) {
        let element = idList[i];
        this.$store
          .dispatch("artists/getArtists", { id: element })
          .then(data => {
            this.artistsIdList.push(data);
          });
      }
      this.isSongDetailMore = false;
      this.isArtistNamePopup = true;
    },
    // 收藏歌曲失败
    tracksFail() {
      this.bottomGrayPromptMsg = "歌曲已存在";
      this.isBottomGrayPrompt = true;
      setTimeout(() => {
        this.isBottomGrayPrompt = false;
        this.bottomGrayPromptMsg = "";
      }, 3000);
    },
    // 收藏歌曲成功
    tracksSuccess() {
      this.bottomGrayPromptMsg = "已收藏到歌单";
      this.isBottomGrayPrompt = true;
      setTimeout(() => {
        this.isBottomGrayPrompt = false;
        this.bottomGrayPromptMsg = "";
      }, 3000);
    },
    //控制新建歌单弹窗显示
    showNewPlaylist() {
      this.isNewPlaylist = true;
    },
    // 控制新建歌单弹窗隐藏
    colseNewPlaylist() {
      this.isNewPlaylist = false;
    },
    // 控制用户歌单显示
    showUserPlaylist() {
      this.isUserPlaylist = true;
    },
    // 控制用户歌单隐藏
    colseUserPlaylist() {
      this.isUserPlaylist = false;
    },
    // 底部详情栏关闭
    songDatailClose() {
      this.isSongDetailMore = false;
    },
    // 点击更多按钮弹出底部详情栏
    more(id, name) {
      this.songId = id;
      this.songName = name;
      this.isSongDetailMore = true;
    },
    // 单个点击播放
    song(id) {
      this.$store
        .dispatch("song_check/getSongCheckData", { id: id })
        .then(value => {
          if (value) {
            let list = [];
            list.push(this.object(id));
            this.localStorage(list, false);
            localStorage.songIsPlayId = id;
            this.$router.push({
              path: "/song_detail",
              query: { ids: id }
            });
          }
        });
    },
    // 封装存储函数
    localStorage(list, judge) {
      if (!(list instanceof Array)) {
        list = [list];
      }
      // judge为true  播放全部 把localStorage.song_list_id全部替换掉
      // judge为false 添加播放 向localStorage.song_list_id后面添加数据
      if (judge) {
        localStorage.song_list_id = JSON.stringify(list);
      } else {
        if (localStorage.song_list_id) {
          let json_list = JSON.parse(localStorage.song_list_id);
          for (let i in list) {
            if (list.hasOwnProperty(i)) {
              let element = list[i];
              let flag = false;
              json_list.forEach(item => {
                if (item.id == element.id) {
                  flag = true;
                }
              });
              if (!flag) {
                json_list.push(element);
              }
            }
          }
          localStorage.song_list_id = JSON.stringify(json_list);
        } else {
          localStorage.song_list_id = JSON.stringify(list);
        }
      }
      let obj = JSON.parse(localStorage.song_list_id);
      let c_list = [];
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          let element = obj[key];
          c_list.push(element.id);
        }
      }
      this.$store.dispatch("song_detail/getSongsDetailData", {
        ids: c_list.join(",")
      });
    },
    // 封装对象
    object(id) {
      let object = {};
      object.name = this.$route.name;
      object.id = id;
      return object;
    },
    // 播放全部
    playAll() {
      let list = [];
      let arr = this.available_data;
      for (let i in arr) {
        if (arr.hasOwnProperty(i)) {
          let element = arr[i];
          list.push(this.object(element));
        }
      }
      this.localStorage(list, true);
      this.$store
        .dispatch("song_detail/getSongDetailData", {
          ids: list[0].id
        })
        .then(data => {
          this.$store
            .dispatch("song_url/getSongUrlData", {
              id: list[0].id,
              br: "999000"
            })
            .then(data => {
              localStorage.songIsPlayId = list[0].id;
              if (!this.music.src) {
                this.music.src = data.data[0].url;
              } else {
                if (this.music.src == data.data[0].url) {
                } else {
                  this.music.src = data.data[0].url;
                }
              }
              if (this.music.paused) {
                let playPromise = this.music.play();
                if (playPromise !== undefined) {
                  playPromise
                    .then(_ => {
                      this.music.play();
                      this.$store.commit("song_status/setPlayPause", true);
                    })
                    .catch(error => {});
                }
              } else {
                this.music.pause();
                this.$store.commit("song_status/setPlayPause", false);
              }
            });
        });
    },
    // 歌曲栏目下拉栏的选择
    typeOptionClick(index) {
      this.typeOptionIndex = index;
      if (this.isRot < 2) {
        this.isRot++;
      } else {
        this.isRot--;
      }
    },
    // 更多热歌点击事件
    moreHotClick() {
      this.tabIndex = 2;
      this.swiper.slideTo(this.tabIndex - 1, 800, false);
    },
    // 监听滚动事件
    scrollTop() {
      if (this.$refs.artist.scrollTop > 180) {
        this.isTop = true;
      } else {
        this.isTop = false;
      }
    },
    // 栏目顶部点击事件
    columnTopClick(index) {
      // if (index == 2) {
      //   if (this.isRot < 2) {
      //     this.isRot++;
      //   } else {
      //     this.isRot--;
      //   }
      //   this.isAct = true;
      // } else {
      //   this.isRot = 0;
      //   this.isAct = false;
      // }
      if (this.tabIndex == index) {
        this.barWidth = 1;
        setTimeout(() => {
          this.barWidth = 0.65;
        }, 150);
      }
      this.tabIndex = index;
      this.swiper.slideTo(this.tabIndex - 1, 800, false);
      if (this.isTop) {
        this.$refs.artist.scrollTop = 181;
      }
    },
    // 获取歌手详情
    getArtistDetail(uid) {
      this.$store.dispatch("artist_desc/getArtistDetail", {
        uid: uid
      });
    },
    // 获得歌手部分信息和热门歌曲
    getArtists() {
      this.$store
        .dispatch("artists/getArtists", { id: this.$route.query.id })
        .then(data => {
          this.getArtistDetail(data.artist.accountId);
        });
    },
    // 返回详情页
    back() {
      this.$router.go(-1);
    }
  },
  filters: {
    // 格式化性别
    doneGender(value) {
      if (value) {
        switch (value) {
          case 0:
            return "保密";
            break;
          case 1:
            return "男";
            break;
          case 2:
            return "女";
            break;
          default:
            return "保密";
            break;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.artist {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
    overflow: hidden;
    .left {
      float: left;
      font-size: 0;
      span {
        color: #fff;
        font-size: 0.38rem;
        font-weight: 900;
        display: inline-block;
        vertical-align: middle;
      }
      > i {
        display: inline-block;
        vertical-align: middle;
        background: url(../images/back.png) no-repeat;
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        margin: 0.2rem;
      }
    }
    .right {
      float: right;
      font-size: 0;
      .followBtn {
        display: inline-block;
        vertical-align: middle;
        border-radius: 0.4rem;
        border: 0;
        color: #fff;
        font-size: 0.28rem;
        padding: 0.14rem 0.2rem;
        line-height: normal;
        background-color: rgba(237, 73, 62, 1);
        i {
          background: url(../images/adx.png) no-repeat;
          background-size: 100% 100%;
          display: inline-block;
          width: 0.32rem;
          height: 0.32rem;
          vertical-align: sub;
          margin-right: 0.06rem;
        }
      }
      > i {
        display: inline-block;
        vertical-align: middle;
        background: url(../images/bbq.png) no-repeat;
        background-size: 100% 100%;
        width: 1rem;
        height: 1rem;
      }
    }
  }
  main {
    .top:after {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background-color: rgba(0, 0, 0, 1);
      opacity: 0.2;
      z-index: -1;
      width: 100%;
      height: 100%;
    }
    .top.sticky:after {
      opacity: 0.6;
    }
    .top.sticky {
      width: 100%;
      height: 1.5rem;
      box-sizing: border-box;
      overflow: hidden;
      position: fixed;
      top: 0;
      .name,
      .nickname,
      .follow,
      .mainAuthType,
      .btn {
        opacity: 0;
      }
    }
    .top {
      padding: 0 0.3rem 0.8rem;
      text-align: left;
      position: relative;
      z-index: 100;
      transition: 0.3s;
      .name {
        color: #fff;
        font-size: 0.38rem;
        font-weight: 900;
        line-height: 0.8rem;
        padding-top: 2rem;
      }
      .nickname {
        color: rgb(235, 231, 231);
        font-size: 0.26rem;
        font-weight: normal;
        line-height: 0.5rem;
      }
      .follow {
        color: rgb(235, 231, 231);
        font-size: 0.26rem;
        font-weight: normal;
        line-height: 0.5rem;
      }
      .mainAuthType {
        color: rgb(235, 231, 231);
        font-size: 0.26rem;
        font-weight: normal;
        line-height: 0.5rem;
        .desc {
          display: inline-block;
          vertical-align: middle;
        }
        .tags {
          font-size: 0.16rem;
          border-radius: 0.08rem;
          border: 0.01rem solid #ccc;
          margin-right: 0.1rem;
          vertical-align: middle;
          display: inline-block;
          line-height: normal;
          padding: 0 0.06rem;
        }
      }
      .btn {
        position: absolute;
        right: 0.3rem;
        bottom: 0.9rem;
        .followBtn {
          border-radius: 0.4rem;
          border: 0;
          color: #fff;
          font-size: 0.28rem;
          padding: 0.14rem 0.2rem;
          line-height: normal;
          background-color: rgba(237, 73, 62, 1);
          i {
            background: url(../images/adx.png) no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            width: 0.32rem;
            height: 0.32rem;
            vertical-align: sub;
            margin-right: 0.06rem;
          }
        }
        .sendText {
          border-radius: 0.4rem;
          border: 0;
          color: #fff;
          font-size: 0.28rem;
          padding: 0.14rem 0.2rem;
          line-height: normal;
          background-color: rgba(160, 155, 154, 0.6);
          i {
            background: url(../images/ame.png) no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            width: 0.32rem;
            height: 0.32rem;
            vertical-align: sub;
            margin-right: 0.06rem;
          }
        }
      }
    }
    .content.mt {
      margin-top: 4.5rem;
    }
    .content {
      background-color: #fff;
      border-top-right-radius: 0.5rem;
      border-top-left-radius: 0.5rem;
      margin-top: -0.5rem;
      .columnTop {
        position: relative;
        background-color: #fff;
        border-top-right-radius: 0.5rem;
        border-top-left-radius: 0.5rem;
        z-index: 100;
        position: sticky;
        top: 1rem;
        > i {
          display: inline-block;
          width: 0.65rem;
          height: 0.04rem;
          background-color: rgba(237, 73, 62, 1);
          position: absolute;
          bottom: 0;
          // left: 0.425rem;
          transition: 0.3s;
        }
        > ul {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          border-bottom: 0.01rem solid #eee;
          line-height: 0.9rem;
          > li {
            width: 20%;
            font-size: 0.3rem;
            color: #555;
            position: relative;
            .select {
              position: absolute;
              background-color: #fff;
              width: 100vw;
              bottom: -2.44rem;
              left: -1.5rem;
              border-top: 0.01rem solid #eee;
              border-bottom: 0.01rem solid #eee;
              box-shadow: 0.02rem 0.02rem 0.2rem #ccc;
              > ul {
                > li {
                  text-align: left;
                  color: #666;
                  font-size: 0.32rem;
                  line-height: 0.8rem;
                  text-indent: 1em;
                  font-weight: normal;
                  position: relative;
                  > b.true {
                    display: inline-block;
                    width: 0.3rem;
                    height: 0.3rem;
                    background: url(../images/ag9.png) no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0.2rem;
                    margin: auto;
                  }
                }
              }
            }
          }
          li.red {
            color: rgba(237, 73, 62, 1);
            font-weight: 900;
          }
          i {
            display: inline-block;
            position: absolute;
            top: 0.4rem;
            right: 0.18rem;
            width: 0rem;
            height: 0rem;
            border: 0.1rem solid;
            border-color: rgba($color: #000000, $alpha: 0.8) transparent
              transparent transparent;
          }
          i.act {
            border-color: rgba(237, 73, 62, 1) transparent transparent
              transparent;
          }
          i.rot {
            transform: rotate(180deg);
            top: 0.3rem;
          }
        }
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: rgba($color: rgb(0, 0, 0), $alpha: 0.1);
      }
      .swiper-wrap {
        min-height: 12rem;
        li.unavailable {
          opacity: 0.3;
        }
        .hot {
          background-color: #fff;
          padding-bottom: 1rem;
          .header {
            padding: 0 0.3rem;
            text-align: left;
            line-height: 1.2rem;
            i {
              display: inline-block;
              width: 0.4rem;
              height: 0.4rem;
              background: url(../images/bk7.png) no-repeat;
              background-size: 100% 100%;
              vertical-align: middle;
              margin-right: 0.2rem;
              margin-top: -0.04rem;
            }
            span {
              display: inline-block;
              font-weight: 900;
              color: #333;
              font-size: 0.36rem;
              vertical-align: middle;
            }
          }
          ul {
            li {
              padding: 0 0.2rem;
              overflow: hidden;
              display: flex;
              flex-direction: row;
              .left {
                display: flex;
                flex-direction: row;
                text-align: left;
                flex: 1;
                .sort {
                  padding: 0.3rem 0.22rem 0.3rem 0.04rem;
                  color: #666;
                  font-size: 0.38rem;
                  text-align: center;
                  width: 0.5rem;
                }
                .info {
                  padding-top: 0.15rem;
                  .title {
                    color: #333;
                    font-size: 0.32rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 5.6rem;
                  }
                  .ar {
                    color: #999;
                    font-size: 0.24rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 5.6rem;
                  }
                  .al {
                    color: #999;
                    font-size: 0.24rem;
                  }
                  span {
                    color: #999;
                  }
                }
              }
              .right {
                display: flex;
                align-items: center;
                .video {
                  display: inline-block;
                  width: 0.5rem;
                  height: 0.5rem;
                  background: url(../images/bfz.png) no-repeat;
                  background-size: 100% 100%;
                  margin-right: 0.2rem;
                }
                .more {
                  display: inline-block;
                  width: 0.4rem;
                  height: 0.4rem;
                  background: url(../images/b2a.png) no-repeat;
                  background-size: 100% 100%;
                }
              }
            }
          }
          .moreHot {
            line-height: 1rem;
            color: #999;
            font-size: 0.3rem;
            i {
              display: inline-block;
              width: 0.12rem;
              height: 0.22rem;
              background: url(../images/bfb.png) no-repeat;
              background-size: 100% 100%;
            }
          }
          .line {
            width: 100%;
            height: 0.15rem;
            background-color: #f0f0f0;
            opacity: 0.5;
          }
          .basicInfo {
            background-color: #fff;
            .basicTop {
              padding: 0 0.3rem;
              text-align: left;
              line-height: 1.2rem;
              span {
                display: inline-block;
                font-weight: 900;
                color: #333;
                font-size: 0.36rem;
                vertical-align: middle;
              }
            }
            p {
              padding: 0 0.3rem;
              text-align: left;
              color: #777;
              font-size: 0.28rem;
              line-height: 0.5rem;
            }
            .moreInfo {
              line-height: 1rem;
              color: #999;
              font-size: 0.3rem;
              i {
                display: inline-block;
                width: 0.12rem;
                height: 0.22rem;
                background: url(../images/bfb.png) no-repeat;
                background-size: 100% 100%;
              }
            }
          }
        }
        .song {
          background-color: #fff;
          padding-bottom: 1rem;
          .header {
            padding: 0 0.3rem;
            text-align: left;
            line-height: 1.2rem;
            i {
              display: inline-block;
              width: 0.4rem;
              height: 0.4rem;
              background: url(../images/bk7.png) no-repeat;
              background-size: 100% 100%;
              vertical-align: middle;
              margin-right: 0.2rem;
              margin-top: -0.04rem;
            }
            span {
              display: inline-block;
              font-weight: 900;
              color: #333;
              font-size: 0.36rem;
              vertical-align: middle;
            }
          }
          ul {
            li {
              padding: 0 0.2rem;
              overflow: hidden;
              display: flex;
              flex-direction: row;
              .left {
                display: flex;
                flex-direction: row;
                text-align: left;
                flex: 1;
                .sort {
                  padding: 0.3rem 0.22rem 0.3rem 0.04rem;
                  color: #666;
                  font-size: 0.38rem;
                  text-align: center;
                  width: 0.5rem;
                }
                .info {
                  padding-top: 0.15rem;
                  .title {
                    color: #333;
                    font-size: 0.32rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 5.6rem;
                  }
                  .ar {
                    color: #999;
                    font-size: 0.24rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 5.6rem;
                  }
                  .al {
                    color: #999;
                    font-size: 0.24rem;
                  }
                  span {
                    color: #999;
                  }
                }
              }
              .right {
                display: flex;
                align-items: center;
                .video {
                  display: inline-block;
                  width: 0.5rem;
                  height: 0.5rem;
                  background: url(../images/bfz.png) no-repeat;
                  background-size: 100% 100%;
                  margin-right: 0.2rem;
                }
                .more {
                  display: inline-block;
                  width: 0.4rem;
                  height: 0.4rem;
                  background: url(../images/b2a.png) no-repeat;
                  background-size: 100% 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>